<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="test">尚硅谷IT教育</div>
    <button id="btn">点击</button>
    <div id="demo">
      <ul id="ul">
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
      </ul>
    </div>

    <!--
    1. [].slice.call(伪数组): 将伪数组转换为真数组
    2. node.nodeType: 得到节点类型 1 元素节点  3. 文本节点
    3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)// 注意: value,writable不能get和set同时出现
    4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
    5. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
    6. DocumentFragment: 文档碎片(高效批量更新多个节点)
       6.1 创建fragment: document.createDocumentFragment()
       6.2 将dom节点添加到fragment中: fragment.appendChild(item)
       6.3 获取fragment的子节点: fragment.children
       6.4 把fragment里的子节点添加到页面中: document.querySelector('#demo').appendChild(fragment)
    7. RegExp.$1
    -->
    <script>
      // 1.
      // [1,2,3].slice()
      // [9,8,7].slice()

      // function slice(){
      //   let newArr = []
      //   for(let i = 0, i < this.length; i++){
      //     newArr[i] = this[i]
      //   }
      //   return newArr
      // }
      // const likeArr = document.getElementsByTagName('li')
      // console.log(likeArr)
      // ;[].slice.call(likeArr)
      // 2.
      // console.log(document.getElementById('ul').childNodes)

      // 3. Object.defineProperty(目标对象, 属性, 配置对象)
      // 作用: 定义某个对象中的某个属性(有这个属性就重新定义,没有这个属性就添加这个属性)
      // let obj = {}
      // let data = 123
      // Object.defineProperty(obj, 'xxx', {
      //   // value: 'hello', // 定义这个属性的值
      //   // writable: true, // 默认值false 表示是否可以修改属性
      //   configurable: true, // 默认值false 表示是否可以删除属性
      //   enumerable: true, // 默认值是false 是否可以被遍历
      //   // 注意: get和set不能和value同时存在
      //   // 当访问obj.xxx的时候执行get
      //   get() {
      //     console.log('get执行了')
      //     // get的返回值,决定了obj对象的xxx属性的值
      //     return data
      //   },
      //   // 当修改obj.xxx的时候执行set
      //   set(value) {
      //     // console.log('set执行了', value)
      //     data = value
      //   },
      // })

      // console.log(obj.xxx)
      // obj.xxx = 999
      // console.log(obj.xxx)

      // delete obj.xxx
      // console.log(obj)
      // for (let key in obj) {
      //   console.log(key)
      // }

      // 4.
      // const obj = {
      //   x: 1,
      //   y: 2,
      //   z: 3,
      // }
      // console.log(Object.keys(obj))

      // 5.
      // const obj = { name: 'zs' }
      // const proxy = {}
      // Object.defineProperty(proxy, 'name', {
      //   get() {
      //     return obj.name
      //   },
      // })

      // console.log(obj.hasOwnProperty('name'))
      // console.log(proxy.hasOwnProperty('name')) // 注意: 代理对象的name属性也是proxy自己的,只是值是obj.name的值

      // 6.

      // btn.onclick = function () {
      //   // 创建文档碎片
      //   const fragment = document.createDocumentFragment()
      //   // 将dom树上的节点从dom树上取下来,放到文档碎片中
      //   fragment.appendChild(document.getElementById('ul'))

      //   // 获取fragment中的子节点(ul是fragment的子节点. li是ul的子节点)
      //   const lis = fragment.children[0].children

      //   ;[].slice.call(lis).forEach((item, index) => {
      //     item.innerText = index
      //   })
      //   // 将文档碎片的内容,添加到dom树上
      //   // 文档碎片对象会自动将其子节点添加到指定的dom节点中
      //   demo.appendChild(fragment)
      // }

      // 7.
      // js中正则: 操作字符串(匹配(test),提取(match,RegExp.$?),替换(replace))
      const reg = /(\d{4})-(\d{2})-(\d{2})/

      const str = '2023-08-30'
      if (reg.test(str)) {
        // 利用RegExp.$n 去提取字符串的内容第一个要求是让字符串和正则建立关系(匹配).
        // 注意: RegExp.$n 只能获取正则中使用了分组特殊字符的内容
        console.log(RegExp.$1)
        console.log(RegExp.$2)
        console.log(RegExp.$3)
        console.log(RegExp.$4)
      }
    </script>
  </body>
</html>
